<template>
  <div id="rich"></div>
</template>

<script setup>
import { onMounted, onUnmounted } from "vue";
import * as echarts from "echarts";
let myRich = null;
let myEchart = null;
onMounted(() => {
  myRich = document.getElementById("rich");
  myEchart = echarts.init(myRich);
  let data = [
    ["d1", 20],
    ["d2", 40],
    ["d1", 65],
  ];
  let option = {
    tooltip: {},
    xAxis: {
      type: "category",
      data: ["d1", "d2", "d3", "d4"],
    },
    yAxis: {},
    series: [
      // 直接使用坐标标记法
      //   {
      //     type: "graph",
      //     symbolSize: 15,
      //     lineStyle: {
      //       width: 10,
      //     },
      //     edgeSymbol: ["none", "arrow"],
      //     edgeSymbolSize: 15,
      //     edgeLabel: {
      //       show: true,
      //       formatter: (value) => {
      //         let pos = value.data;
      //         return pos.source + "指向" + pos.target;
      //       },
      //     },
      //     data: [
      //       {
      //         name: "张三",
      //         value: 20,
      //         x: 10,
      //         y: 10,
      //       },
      //       {
      //         name: "李斯",
      //         value: 40,
      //         x: 30,
      //         y: 10,
      //       },
      //       {
      //         name: "王五",
      //         value: 30,
      //         x: 15,
      //         y: 15,
      //       },
      //     ],
      //     links: [
      //       {
      //         source: "张三",
      //         target: "李斯",
      //       },
      //     ],
      //   },
      // 使用直接坐标系标注
      {
        type: "graph",
        coordinateSystem: "cartesian2d", // 直角坐标系
        data: data, // 二维数组
        symbolSize: 15,
        links: [
          { source: 0, target: 1 },
          {
            source: 1,
            target: 2,
          },
          {
            source: 2,
            target: 0,
          },
        ],
        edgeLabel: {
          show: true,
          formatter: (value) => {
            let pos = value.data;
            return data[pos.source][0] + "指向" + data[pos.target][0];
          },
        },
        edgeSymbol: ["none", "arrow"],
        edgeSymbolSize: 10,
      },
    ],
  };
  myEchart.setOption(option);
});
onUnmounted(() => {
  myEchart.dispose(myRich);
});
</script>

<style lang="less" scoped>
#rich {
  width: 800px;
  height: 400px;
}
</style>
